<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        3.2内嵌式
            + 说明
                + 内嵌式样式需要在head标签中,通过一对style标签定义CSS样式
                + CSS样式的作用范围控制要依赖选择器
                + CSS的样式代码中注释的方式为  /*   */
                + 内嵌式虽然对样式代码做了抽取,但是CSS代码仍然在html文件中
                + 内嵌样式仅仅能作用于当前文件,代码复用度还是不够,不利于网站风格统一
    -->
    <style>
        /* 通过选择器确定样式的作用范围 */
        /* 所有input标签都是该样式 */
        input {
            /* display: block; */
            width: 80px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
</body>
</html>